<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>

          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
            当前位置：
            <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
            <router-link to="/productionDelivery" style="color: #409eff;">在售商品管理</router-link>>
            查看分销商
          </div>

          <div class="hei10"></div>

				<div class="title">{{title}}商品的分销商</div>

        <div style="margin:20px;" v-loading="loading">

          <el-button type="primary" @click="daochu" round style="margin:0 20px 20px 0;">导出代理商列表</el-button>

          <el-button type="primary" @click="daochu2" round plain style="margin:0 0 20px 0;">导出所有拦截订单明细</el-button>

          <el-table :data="list" border style="width: 100%; " ref="multipleTable">
            <el-table-column align='center' prop='name' label="可见该商品的分销商"></el-table-column>
            <el-table-column align='center' prop='cm' label="客户经理"></el-table-column>
            <el-table-column align='center' prop='mobile' label="联系电话"></el-table-column>
            <el-table-column align='center' label="是否已上架">
              <template slot-scope="scope">
                {{scope.row.status === 100 ? '上架' : '下架'}}
              </template>
            </el-table-column>
            <el-table-column align='center'  label="要求省内订单比例">
              <template slot-scope="scope">
                <el-input v-model="scope.row.in_province_order_ratio" @input="changego(scope.row)" style="" placeholder="要求省内订单比例"><template slot="append">%</template></el-input>
              </template>
            </el-table-column>
            <el-table-column align='center' >
              <template slot="header" slot-scope="scope">
                检测起始值
                <el-tooltip class="item" effect="dark" content="日订单数大于下方配置数值时才开始检测省内省外，低于该额度时不做判断自动放行" placement="top-start">
                  <i class="el-icon-warning" style="color: #333333; font-size: 22px;"></i>
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <el-input v-model="scope.row.in_province_order_ratio_min" @input="changego(scope.row)" style="" placeholder="检测起始值"></el-input>
              </template>
            </el-table-column>

            <el-table-column align='center' prop='page_order_ratio_limit_count' label="拦截订单数"></el-table-column>

           <el-table-column align='center' label="操作">
              <template slot-scope="scope">

                <div style="color: #0023FF; cursor: pointer;" @click="$router.push('/productionBasismanag/lanjieduilie?id='+scope.row.id+'&limit_type=2&product_id='+scope.row.product_id)">查看队列></div>
              </template>
            </el-table-column>
          </el-table>

        </div>



			</div>
		</div>
		<!-- <foot></foot> -->
	</div>
</template>

<script>
  import _ from 'lodash';
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name: 'mySupplier',
		data(){
			return{
				id:"",

				loading:true,
				total:0,
				pagesize:20,
				page:1,
				list:"",
        chooseid: '',
        title: '',
        all:{
          config_type:3,
          order_pages_short_id:"",
          in_province_order_ratio:"",
          parent_order_pages_short_id:"",
          in_province_order_ratio_min:""
        }
			}
		},
		created() {
			//传进来的shopid
			if(this.$route.query.id){
				this.chooseid = this.$route.query.id
        this.title = this.$route.query.id
			}
			this.getlist();
		},
		methods:{

      changego: _.debounce(function(row) {
        this.all = {
          config_type:3,
          order_pages_short_id:row.id,
          parent_order_pages_short_id:this.$route.query.id,
          in_province_order_ratio:row.in_province_order_ratio,
          in_province_order_ratio_min:row.in_province_order_ratio_min
        }
        axios.post('/api/product_order_config/store',this.all)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('更改成功');
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      }, 1000),
			daochu:function(){
				axios.get('/api/plan-market/page/who/sales2?id='+this.$route.query.id)
					.then(response => {
						if(response.data.msg.code == 0){
							location.href = response.data.data

						}else{
							if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
							this.$message.error(response.data.msg.info);
						}
					})
			},
      daochu2:function(){
				axios.get('/api/plan-market/page/who/sales/import/order_limits?id='+this.$route.query.id)
					.then(response => {
						if(response.data.msg.code == 0){
							location.href = response.data.data
						}else{
							if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//翻页
			fanye:function(page){
				this.loading = true
				this.page = page
				this.getlist()
			},
			//获取分销商
			getlist:function(){
				var that = this;
				axios.get('/api/plan-market/page/who/sales?p_status_all=1&id='+this.chooseid)
					.then(response => {
						if(response.data.msg.code == 0){
							that.list = response.data.data
							that.loading = false
						}else{
							if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
							that.$message.error(response.data.msg.info);
						}
					})
			},
		}

	}
</script>

<style lang="scss" scoped>
	.index{
				.title{border-bottom: 1px #EAEAEA solid;  line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272;}
				.add{ display: flex; justify-content: space-between; padding: 20px 30px; text-align: right; position: relative;
					.input-with-select{ width: 280px;}
					.el-button{  padding: 10px 20px;}
				}
				.list{
					display: flex; text-align: center; color: #727272; line-height: 45px; margin: 0 20px; border: 1px #EAEAEA solid; margin-top: -1px;
					.th{ flex: 1; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid;  }
					.td{ flex: 1; font-size: 14px; border-right:1px #EAEAEA solid;
						.el-button{
							a{ color: #409EFF;}
							&:hover{
								a{ color: #FFF;}
							}
						}

					}
          .th1{ flex-basis: 50px; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid;  }
          .td1{ flex-basis: 50px;  font-size: 14px; border-right:1px #EAEAEA solid;  }

				}
				.el-pagination{ text-align: right; margin: 20px 0}
				.my{
					display: flex; justify-content: space-between; padding: 20px; line-height: 20px;align-items: center;
					.myid{
						font-size: 17px; color: #DD2727; padding-left: 10px;display: flex; align-items: center;
            .tip{
              display: inline-flex;flex-direction: column;
              span{ color: #B1B1B1; font-size: 14px; margin: 0 20px}
            }
					}
					.invitation{
						font-size: 14px; color: #B1B1B1;
						span{ color: #197CFF; cursor: pointer;}
					}
				}


	}
</style>
